<template>
  <div class="section-todo">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1" @click.native="handleChangeStatus(1)">
        <template slot="title">
          <div class="list-title">个人用户报装待办统计</div>
        </template>
        <personalUser :info="userInfo" />
      </el-collapse-item>

      <el-collapse-item name="2" @click.native="handleChangeStatus(2)">
        <template slot="title">
          <div class="list-title">建设项目报装待办统计</div>
        </template>
        <projectBuild :info="buildInfo" />
      </el-collapse-item>

      <el-collapse-item name="3" @click.native="handleChangeStatus(3)">
        <template slot="title">
          <div class="list-title">一户一表报装待办统计</div>
        </template>
        <oneHomeOneMeter :info="meterInfo" />
      </el-collapse-item>

      <el-collapse-item name="4" @click.native="handleChangeStatus(4)">
        <template slot="title">
          <div class="list-title">变更工程报装待办统计</div>
        </template>
        <projectChange :info="changeInfo" />
      </el-collapse-item>
    </el-collapse>
  </div>
  <!-- </my-card> -->
</template>

<script>
import personalUser from "./todo/personalUser";
import projectBuild from "./todo/projectBuild";
import oneHomeOneMeter from "./todo/oneHomeOneMeter";
import projectChange from "./todo/projectChange";
export default {
  components: {
    personalUser,
    projectBuild,
    oneHomeOneMeter,
    projectChange
  },
  props: {
    // info: {
    //   type: Object,
    //   default: () => ({})
    // }
  },
  data() {
    return {
      activeNames: ["1"],
      type: 1,
      userInfo:{},
      buildInfo:{},
      meterInfo:{},
      changeInfo:{}
    };
  },
  methods: {
   
    async handleChangeStatus(val) {
      await this.getOrdersTodo(val)
    },
  
    async getOrdersTodo(type) {
      const [err, res] = await this.$Api.Stats.todo({
        params: {
          type
        }
      });
      if (!err && res) {
        switch (type) {
          case 1:
            this.userInfo = res;
            break;
          case 2:
            this.buildInfo = res;
            break;
          case 3:
            this.meterInfo = res;
            break;
          case 4:
            this.changeInfo = res;
            break;
          default:
            break;
        }
      }
    }
  },
  mounted() {
    this.getOrdersTodo(1);
  }
};
</script>

<style lang="scss" scoped>
.section-todo {
  .el-collapse {
    border: 0px solid;
  }
  .el-collapse-item__header {
    border-bottom: 0px solid;
  }
}

.list-title {
  font-size: 16px;
  font-weight: bold;
}
</style>
